<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs属性绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--  v-bind:绑定html元素的属性值-->
    <font v-bind:color="color" v-bind:size="size">桃子哥</font>

    <hr/>
    <!--    简写：html元素的属性值-->
    <font :color="color" :size="size">桃子哥</font>

    <hr/>

    <!--    拼接多个颜色值-->
    <font :color="color1 + color2" :size="size">涛子哥</font>

    <!--    url带参数值-->
    <a :href="'http://www.baidu.com?id='+id">百度</a>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            color: 'red',
            color1: 'yellow',
            color2: 'green',
            size: 30,
            id: 100
        }
    });
</script>
</body>
</html>